import React, { Component } from 'react'
import { Icon, Menu } from 'antd'
import { withRouter } from 'react-router-dom'
import AssignmentTagPane from './assignment-tag-pane'
import StudentTagPane from './student-tag-pane'
import { FormattedMessage } from 'react-intl'

class TagBox extends Component {
  constructor (props) {
    super(props)
    this.state = {
      currentType: 'studentTag'
    }
  }
  render () {
    return <div><Menu
      onClick={(e) => this.setState({currentType: e.key})}
      selectedKeys={[this.state.currentType]}
      mode='horizontal'
    >
      <Menu.Item key='studentTag'>
        <Icon type='user' /><FormattedMessage id='学员 Tag' />
      </Menu.Item>
      <Menu.Item key='assignmentTag'>
        <Icon type='tags' /><FormattedMessage id='作业 Tag' />
      </Menu.Item>
    </Menu>
      {this.state.currentType === 'studentTag'
        ? <StudentTagPane programId={this.props.programId} />
        : <AssignmentTagPane programId={this.props.programId} />
      }

    </div>
  }
}
export default withRouter((TagBox))
